<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui扩展组件layFilter</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      background-color: #f5f7f9;
      align-items: center;
      padding: 60px 0;
    }
    .layfilter{
      width: 80%;
      margin-bottom: 60px;
      background-color: #fff;
      position: relative;
    }
    .layfilter .title{
      position: absolute;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      font-weight: bold;
      left: 50%;
      top: -30px;
      border-radius: 30px 30px 0 0;
      transform: translate(-50%,0);
      background-color: #fff;
    }
    .btn-group{
      margin-top: 20px;
      padding: 0 20px;
    }
    .show-code{
      margin-top: 20px;
      border-top: 1px solid #e0e0e0;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    .show-code span{
      cursor: pointer;
      font-size: 16px;
      color: #999;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="layfilter">
      <div class="title">电商类</div>
      <div id="layfilter1" lay-filter="layfilter"></div>
      <div class="btn-group">
        <button class="layui-btn layui-btn-primary" id="getValBtn1">获取选中值(直接获取)</button>
        <button class="layui-btn layui-btn-primary" id="resetBtn1">全部重置</button>
        <button class="layui-btn layui-btn-primary" id="setDisabledBtn1">设置禁用</button>
        <a class="layui-btn layui-btn-danger" href="https://www.52fansite.com">个博客(建设ing)</a>
      </div>
      <div class="show-code"><span><i class="layui-icon layui-icon-down"></i>  查看代码</span></div>
      <pre class="layui-code layui-hide" style="margin: 0;">
        layui.use(['layer', 'layFilter'], function () {
          var $ = layui.jquery;
          var layer = layui.layer;
          var layfilter = layui.layFilter;

          var dataSource1 = []; //太长了，就不展示了，直接看源码吧


          var filter1 = layfilter.render({
            elem: '#layfilter1',
            itemWidth: 80 ,
            labelWidth: 100,
            dataSource:dataSource1,
            color: "#FF5722",
            success: (data)=>{
            },
            onChange: (status, data, dom)=>{
              console.log("filter1 is change",status,data,dom);
            }
          });

          //获取选中值（直接获取）
          $('#getValBtn1').click(function () {
            layer.alert(JSON.stringify(filter1.getValue()));
          });
          //全部重置
          $("#resetBtn1").click(function(){
            filter1.resetFilter(function(){
              layer.msg('重置了！');
            })
          });
          //设置禁用
          $("#setDisabledBtn1").click(function() {
            filter1.setDisabled('brand','chuizi')
          });

        })
      </pre>
    </div>
    <div class="layfilter">
      <div class="title">影视类</div>
      <div id="layfilter2" lay-filter="layfilter2"></div>
      <div class="btn-group">
        <button class="layui-btn layui-btn-primary" id="getValBtn2">获取选中值(回调获取)</button>
        <button class="layui-btn layui-btn-primary" id="resetBtn2">重置(指定类别)</button>
        <button class="layui-btn layui-btn-primary" id="setDisabledBtn2">设置禁用</button>
      </div>
      <div class="show-code"><span><i class="layui-icon layui-icon-down"></i>  查看代码</span></div>
      <pre class="layui-code layui-hide" style="margin: 0;">
        layui.use(['layer', 'layFilter'], function () {
          var $ = layui.jquery;
          var layer = layui.layer;
          var layfilter = layui.layFilter;
  
          var dataSource2 = []; //太长了，就不展示了，直接看源码吧
  
          var filter2 = layfilter.render({
            elem: '#layfilter2',
            labelWidth: 80,
            dataSource:dataSource2,
            color: "#009688",
            success: (data)=>{
              data.setValue('category','123')
              data.setValue('day','137','138')
              data.setDisabled('category','aiqing')
            },
            onChange: (status, data, dom)=>{
              console.log("filter2 is change",status,data);
            }
          });

          //获取选中值（回调获取）
          $('#getValBtn2').click(function () {
            filter2.getValue(function (data) {
              layer.alert(JSON.stringify(data));
            })
          });
          //重置（指定类别）
          $("#resetBtn2").click(function(){
            filter2.resetFilter(function(){
              layer.msg(`重置了[类别]！`);
            },'category')
          })
          //设置禁用
          $("#setDisabledBtn2").click(function() {
            filter2.setDisabled('category','jingsong')
          })
  
        })
      </pre>
    </div>
    <div class="layfilter">
      <div class="title">社交类</div>
      <div id="layfilter3" lay-filter="layfilter3"></div>
      <div class="show-code"><span><i class="layui-icon layui-icon-down"></i>  查看代码</span></div>
      <pre class="layui-code layui-hide" style="margin: 0;">
        layui.use(['layer', 'layFilter'], function () {
          var $ = layui.jquery;
          var layer = layui.layer;
          var layfilter = layui.layFilter;
  
  
          var filter3 = layfilter.render({
            elem: '#layfilter3',
            labelWidth: 180,
            dataSource,
            color: "#1E9FFF",
            success: (data)=>{
            },
            onChange: (status, data, dom)=>{
              console.log(status,data);
            }
          });
  
        })
      </pre>
    </div>
  </div>

  <script src="layui/layui.js"></script>
  <script src="js/common.js"></script>
  <script>
    layui.config({
      version: '1545041465443' //为了更新 js 缓存，可忽略
    });

    layui.use(['layer','code', 'layFilter'], function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var layfilter = layui.layFilter;
      layui.code({skin: 'notepad'});
      var dataSource1 = 
      [
        {
            "title": "手机品牌",
            "name": "brand",
            "type": "checkbox",
            "allValue": "ALL",
            "allName": "所有",
            "data": [
                {
                    "value": "huawei",
                    "name": "华为",
                },
                {
                    "value": "xiaomi",
                    "name": "小米",
                },
                {
                    "value": "meizu",
                    "name": "魅族",
                },
                {
                    "value": "huashuo",
                    "name": "华硕",
                },
                {
                    "value": "chuizi",
                    "name": "锤子",
                },
                {
                  "value": "yijia",
                  "name": "一加",
                },
                {
                  "value": "vivo",
                  "name": "vivo",
                },
                {
                  "value": "oppo",
                  "name": "oppo",
                },
                {
                  "value": "iphone",
                  "name": "iphone",
                  "disabled": true
                }
            ]
        },
        {
            "title": "UI系统",
            "name": "os",
            "type": "radio",
            "data": [
                {
                    "value": "Hongmeng",
                    "name": "鸿蒙OS",
                    "disabled": true
                },
                {
                    "value": "MIUI",
                    "name": "MIUI"
                },
                {
                    "value": "IOS",
                    "name": "IOS"
                }
            ]
        },
        {
            "title": "配送范围",
            "name": "city",
            "type": "checkbox",
            "allName": "不限",
            "data": [
                {
                    "value": "129",
                    "name": "武汉"
                },
                {
                    "value": "130",
                    "name": "宜昌"
                },
                {
                    "value": "131",
                    "name": "黄冈"
                },
                {
                    "value": "132",
                    "name": "咸宁"
                },
                {
                    "value": "133",
                    "name": "孝感"
                },
                {
                    "value": "134",
                    "name": "恩施"
                },
                {
                    "value": "135",
                    "name": "荆门"
                },
                {
                    "value": "136",
                    "name": "荆州"
                },
                {
                    "value": "137",
                    "name": "黄石"
                },
                {
                    "value": "138",
                    "name": "襄阳"
                },
                {
                    "value": "139",
                    "name": "鄂州"
                },
                {
                    "value": "140",
                    "name": "随州"
                },
                {
                    "value": "141",
                    "name": "神农架",
                    "disabled": true
                },
                {
                    "value": "142",
                    "name": "潜江"
                },
                {
                    "value": "143",
                    "name": "仙桃"
                },
                {
                    "value": "144",
                    "name": "天门"
                },
                {
                    "value": "145",
                    "name": "十堰"
                }
            ]
        },
        {
            "title": "价格区间",
            "name": "price",
            "type": "radio",
            "data": [
                {
                    "value": "<1000",
                    "name": "1000以下",
                    "disabled": true
                },
                {
                    "value": "1000~1999",
                    "name": "1000~1999元"
                },
                {
                    "value": "2000~2999",
                    "name": "2000~2999元"
                },
                {
                    "value": "3000~3999",
                    "name": "3000~3999元"
                },
                {
                    "value": "4000~4999",
                    "name": "4000~4999元"
                },
                {
                    "value": "5000~5999",
                    "name": "5000~5999元"
                },
                {
                    "value": "6000~6999",
                    "name": "6000~6999元"
                },
                {
                    "value": "7000~9999",
                    "name": "7000~9999元"
                },
                {
                    "value": ">=10000",
                    "name": "一万元以上"
                }
            ]
        }
      ];
      var dataSource2 = [
        {
          "title": "类型",
          "name": "type",
          "type": "checkbox",
          "data": [
                {
                    "value": "dianying",
                    "name": "电影",
                },
                {
                    "value": "dianshiju",
                    "name": "电视剧",
                },
                {
                    "value": "dongman",
                    "name": "动漫",
                },
                {
                    "value": "zongyi",
                    "name": "综艺",
                },
                {
                    "value": "yinyue",
                    "name": "音乐",
                },
                {
                    "value": "jilupian",
                    "name": "纪录片",
                },
          ]
        },
        {
          "title": "类别",
          "name": "area",
          "type": "radio",
          "data": [
                {
                    "value": "huayu",
                    "name": "华语",
                },
                {
                    "value": "xianggang",
                    "name": "香港地区",
                },
                {
                    "value": "meiguo",
                    "name": "美国",
                },
                {
                    "value": "ouzhou",
                    "name": "欧洲",
                },
                {
                    "value": "hanguo",
                    "name": "韩国",
                },
                {
                    "value": "riben",
                    "name": "日本",
                },
                {
                    "value": "taiguo",
                    "name": "泰国",
                },
                {
                    "value": "yindu",
                    "name": "印度",
                },
                {
                    "value": "other",
                    "name": "其他",
                },
          ]
        },
        {
          "title": "类别",
          "name": "category",
          "type": "checkbox",
          "data": [
                {
                    "value": "xiju",
                    "name": "喜剧",
                },
                {
                    "value": "dongzuo",
                    "name": "动作",
                },
                {
                    "value": "kongbu",
                    "name": "恐怖",
                },
                {
                    "value": "xuanyi",
                    "name": "悬疑",
                },
                {
                    "value": "fanzui",
                    "name": "犯罪",
                },
                {
                    "value": "jingsong",
                    "name": "惊悚",
                },
                {
                    "value": "zhanzheng",
                    "name": "战争",
                },
                {
                    "value": "juqing",
                    "name": "剧情",
                },
                {
                    "value": "aiqing",
                    "name": "爱情",
                },
          ]
        },
        {
          "title": "规格",
          "name": "spec",
          "type": "radio",
          "data": [
                {
                    "value": "juzhi",
                    "name": "巨制",
                },
                {
                    "value": "yuanxian",
                    "name": "院线",
                },
                {
                    "value": "dubo",
                    "name": "独播",
                },
                {
                    "value": "wangluodianying",
                    "name": "网络电影",
                },
          ]
        },
        {
          "title": "年代",
          "name": "year",
          "type": "radio",
          "data": [
                {
                    "value": "jinnian",
                    "name": "今年",
                },
                {
                    "value": "2020",
                    "name": "2020",
                },
                {
                    "value": "2019",
                    "name": "2019",
                },
                {
                    "value": "2018",
                    "name": "2019",
                },
                {
                    "value": "2017",
                    "name": "2017",
                },
                {
                    "value": "gengzao",
                    "name": "更早",
                },
          ]
        },
        {
          "title": "付费",
          "name": "pay",
          "type": "radio",
          "data": [
                {
                    "value": "mianfei",
                    "name": "免费",
                    "disabled": true
                },
                {
                    "value": "huiyuanmianfei",
                    "name": "会员免费",
                },
                {
                    "value": "yongquan",
                    "name": "用券",
                },
          ]
        }
      ]
      var dataSource3 = [
        {
          "title": "性别",
          "name": "gender",
          "type": "radio",
          "data": [
                {
                    "value": "nan",
                    "name": "男",
                },
                {
                    "value": "nv",
                    "name": "女",
                },
                {
                    "value": "other",
                    "name": "第三性别",
                    "disabled": true
                },
          ]
        },
        {
          "title": "年龄范围",
          "name": "old",
          "type": "radio",
          "data": [
                {
                    "value": "18-20",
                    "name": "18-20岁",
                },
                {
                    "value": "20-22",
                    "name": "20-22岁",
                },
                {
                    "value": "22-24",
                    "name": "22-24岁",
                },
                {
                    "value": "24-30",
                    "name": "24-30岁",
                },
                {
                    "value": "30-40",
                    "name": "30-40岁",
                },
                {
                    "value": ">40",
                    "name": "40岁以上",
                },
          ]
        },
        {
          "title": "国家地区",
          "name": "country",
          "type": "checkbox",
          "data": [
                {
                    "value": "China",
                    "name": "中国",
                },
                {
                    "value": "eluosi",
                    "name": "俄罗斯",
                },
                {
                    "value": "hanguo",
                    "name": "韩国",
                },
                {
                    "value": "riben",
                    "name": "小日本",
                },
                {
                    "value": "laji",
                    "name": "美国",
                },
          ]
        }
      ]

      $('.show-code span').click(function(){
        var $code = $(this).parent().siblings('.layui-code');
        $code.toggleClass('layui-hide');
        $(this).html($code.hasClass('layui-hide') ? '<i class="layui-icon layui-icon-down"></i>  显示代码':'<i class="layui-icon layui-icon-up"></i>  隐藏代码')
      })

      var filter1 = layfilter.render({
        elem: '#layfilter1',
        itemWidth: 80 ,
        labelWidth: 100,
        dataSource:dataSource1,
        color: "#FF5722",
        success: (data)=>{
        },
        onChange: (status, data, dom)=>{
          console.log("filter1 is change",status,data,dom);
        }
      });

      var filter2 = layfilter.render({
        elem: '#layfilter2',
        labelWidth: 80,
        dataSource:dataSource2,
        color: "#009688",
        success: (data)=>{
          data.setValue('category','123')
          data.setValue('day','137','138')
          data.setDisabled('category','aiqing')
        },
        onChange: (status, data, dom)=>{
          console.log("filter2 is change",status,data);
        }
      });

      var filter3 = layfilter.render({
        elem: '#layfilter3',
        labelWidth: 180,
        dataSource:dataSource3,
        color: "#1E9FFF",
        success: (data)=>{
        },
        onChange: (status, data, dom)=>{
          console.log(status,data);
        }
      });

      //获取选中值（直接获取）
      $('#getValBtn1').click(function () {
        layer.alert(JSON.stringify(filter1.getValue()));
      });
      //全部重置
      $("#resetBtn1").click(function(){
        filter1.resetFilter(function(){
          layer.msg('重置了！');
        })
      });
      //设置禁用
      $("#setDisabledBtn1").click(function() {
        filter1.setDisabled('brand','chuizi')
      });
      filter1.on('click(layfilter)', function (obj) {
        console.log(obj);
      })

      //获取选中值（回调获取）
      $('#getValBtn2').click(function () {
        filter2.getValue(function (data) {
          layer.alert(JSON.stringify(data));
        })
      });
      //重置（指定类别）
      $("#resetBtn2").click(function(){
        filter2.resetFilter(function(){
          layer.msg(`重置了[类别]！`);
        },'category')
      })
      //设置禁用
      $("#setDisabledBtn2").click(function() {
        filter2.setDisabled('category','jingsong')
      })

    });
  </script>
</body>

</html>